<template>
	<view class="u-padding-left-32 u-padding-right-32" id="aaa" :class="currentTheme">
		<a-nabbar name="添加收货地址"/>
		<view class="u-padding-top-32">
			<item-box paddinglr="40">
				<label-box label="联系人" labelWidth="130">
					<u-input v-model="form.realName" 
							placeholder="请输入姓名" :clearable="false" border 
							:borderColor="currentThemeObj.inputBorderColor" 
							 :placeholder-style="`color:${currentThemeObj.placeholderColor}`" />
				</label-box>
				<label-box label="联系电话" labelWidth="130">
					<u-input v-model="form.phone" type="number"
							placeholder="请输入联系电话" :clearable="false" border 
							:borderColor="currentThemeObj.inputBorderColor" 
							 :placeholder-style="`color:${currentThemeObj.placeholderColor}`" />
				</label-box>
				<label-box label="所在地区" labelWidth="130">
					<select-item v-model="form.address" :list="cityList" mode="popSelectCity"  @getSelect="getSelectCity" :placeholder="'省、市、区、街道'"></select-item>
				</label-box>
				<label-box label="详细地址" labelWidth="130">
					<u-input v-model="form.detail" 
							placeholder="小区楼栋/乡村名称" :clearable="false" border 
							:borderColor="currentThemeObj.inputBorderColor" 
							 :placeholder-style="`color:${currentThemeObj.placeholderColor}`" />
				</label-box>
				<!-- <label-box label="设置" labelWidth="130">
					<u-input v-model="form.detail" 
							placeholder="请输入详细地址" :clearable="false" border 
							:borderColor="currentThemeObj.inputBorderColor" 
							 :placeholder-style="`color:${currentThemeObj.placeholderColor}`" />
				</label-box> -->
				<view class="u-flex u-row-between u-padding-top-20 u-padding-bottom-20">
					<view class="u-font-32 content-desc-item">设为默认收货地址</view>
					<view>
						<u-switch v-model="form.isDefault" :active-value="1" :inactive-value="0" active-color="#E2E2E2" inactive-color="#E2E2E2"></u-switch>
					</view>
				</view>
			</item-box>
		</view>
		<fixed-team btnText="保存" @btnClick="save"></fixed-team>
	</view>
</template>

<script>
	import {getDetail,update,add} from '@/api/crud.js'
	import selectCityMixins from '@/mixins/selectMixins.js'
	import popCitySelect from '@/components/pop-city-select/pop-city-select.vue'
	export default {
		mixins:[selectCityMixins],
		components: {
			popCitySelect
		},
		data() {
			return {
				apiModule:'shopApi',
				apiType:'userAddress',
				params:{
					province: true,
					city: true,
					area: true
				},
				show:false,
				form:{
					isDefault:false,
				},
				id:'',
				areaTxt:""
			};
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id;
				getDetail('',this.apiType,this.apiModule,this.id).then(res=>{
					if(res.cityPath) {
						res.address = this.cityPathFormat(res.cityPath)
					}
					res.isDefault = !!res.isDefault
					this.form = res;
				})
			}
		},
		computed: {
			areaCode(){
				const address = this.form.address || '';
				return address.split('-').filter(val=>val) || []
			}
		},
		methods:{
			//保存
			save(){
				const fn = this.id ? update : add;
				if(!this.form.address){
					this.$u.toast('请选择所在地区')
					return false;
				}
				if(!this.form.realName){
					this.$u.toast('请填写真实姓名')
					return false;
				}
				if(!this.form.phone){
					this.$u.toast('请填写手机号码')
					return false;
				}
				// if(!this.$u.test.mobile(this.form.phone)){
				// 	this.$u.toast('手机号码不正确')
				// 	return false;
				// }
				if(!this.form.detail){
					this.$u.toast('请填写详细地址')
					return false;
				}
				const form = {
					...this.form,
					isDefault:this.form.isDefault ? 1 : 0
				}
				fn({
					uid:this.$store.getters.loginForm.uid,
					...form,
					isDel:0
				},this.apiType,this.apiModule).then(res=>{
					this.$u.toast('保存成功');
					this.$u.route({type:"back"})
				})
			},
			//导入微信默认地址
			chooseAddress(){
				uni.chooseAddress({
					success:({userName,telNumber,detailInfo,provinceName,cityName,countyName})=> {
						this.form = {
							realName:userName,
							phone:telNumber,
							isDefault:true,
							detail:detailInfo
						}
						this.area = [provinceName,cityName,countyName].map(val=>({label:val}));
						this.$u.toast('导入成功')
					},
					fail(e) {
						this.$u.toast('导入失败')
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page /deep/.u-switch--on .u-switch__node{
		background-color: var(--theme-color);
	}
</style>
<style lang="scss" scoped>
.btn-width{
	width: 300rpx;
}
.bg-primary{
	background-color: $primary;
	color: white;
}
.add-address{
	height: 75rpx;
	line-height: 72rpx;
	text-align: center;
	border: 1rpx solid $primary;
	border-radius: 50rpx;
}
.address-btn{
	left: 0;
	right: 0;
	bottom: 147rpx;
}
</style>
